<template>
	<view class="content">
		<view class="main">

			<view class="menu_name">运单号</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入运单号" maxlength="50" :value="order_sn" @input="onInputOrder" />
				<view class="btn_wb" @click="onQueryWb">扫查单码</view>
			</view>

			<view v-if="detail && detail.goods && order_sn" class="order_div">
				<view>发货地：{{detail.startCity}}</view>
				<view>目的地：{{detail.toCity}}</view>
				<hr style="margin: 16rpx 0 16rpx 0;background: #ccc;border: none;height: 1rpx;" />
				<view>货物名称：{{detail.goods[0].name}}</view>
				<view>货物数量：{{detail.goods[0].num}}</view>
			</view>

			<view style="display: none;" class="menu_name">详细描述</view>
			<textarea style="display: none;" class="et_desc" placeholder="请输入详细描述" @input="onInputDesc" />

			<view class="menu_name">
				上传照片
				<view style="font-size: 24rpx;color: #aaa;margin: 0 0 0 6rpx;">点击图片查看大图</view>
			</view>
			<view class="item_sel_img">
				<view v-for="(item,index) in img_list" class="sel_img_div">
					<image class="sel_img" :src="item" @click="onPreviewImg(index)"></image>
					<view class="sel_img_del" @click="onDelImg(index)">删除</view>
				</view>
			</view>
			<button class="btn_sel_media" @click="onSelImg">选择照片</button>

			<view class="btn_ok" @click="onOk">确定</view>

		</view>


	</view>
</template>

<script>
	import { getUInfo, isEmpty } from '@/util/util.js'
	import { chooseAndUploadImg, chooseAndUploadVideo } from '@/util/uni_util.js'
	export default {
		data() {
			return {
				order_sn: '', // 运单号
				query_num: '', // 查货单号
				detail: {}, // 运单详情

				img_list: [], // 选择的照片

				desc: '', // 描述
			}
		},

		mounted() {},

		onLoad(opts) {
			// 扫码
			uni.$on('onGetQrCode', (data) => {
				let { qr_code, od_num, startCity, toCity, goods } = JSON.parse(data.qr_code_data)
				this.order_sn = od_num
				this.query_num = qr_code
				this.detail = { startCity, toCity, goods }
				console.log('this.detail  = ', this.detail);
			})
		},

		onUnload() {
			uni.$off('onGetQrCode', () => {})
		},

		methods: {

			// 监听:输入描述
			onInputDesc(e) {
				this.desc = e.detail.value
			},
			// 监听:输入单号
			onInputOrder(e) {
				this.order_sn = e.detail.value
				if (!this.order_sn) {
					this.detail = {}
				}
			},
			// 查询运单
			onQueryWb() {
				// this.getOrder()
				uni.navigateTo({ url: '/pages/sys/scan_qrcode?type=2' })
			},
			// 选择上传照片
			async onSelImg() {
				if (this.img_list.length >= 20) {
					uni.showToast({ icon: 'none', title: `最多上传${this.img_list.length}张照片` })
					return
				}
				let res = await chooseAndUploadImg()
				// console.log('上传结果 = ', res);
				this.img_list.push(res)
			},
			// 预览照片
			onPreviewImg(current) {
				uni.previewImage({
					current,
					urls: this.img_list,
					success: (res) => {},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				})
			},
			// 删除照片
			onDelImg(index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该照片？',
					success: (res) => {
						if (res.confirm) {
							// 从index开始删除1个元素
							that.img_list.splice(index, 1)
						}
					},
				})
			},

			// 提交上报
			onOk() {
				if (!this.order_sn) {
					uni.showToast({ icon: 'none', title: '请输入运单号' })
					return
				}
				if (!this.img_list || this.img_list.length <= 0) {
					uni.showToast({ icon: 'none', title: '请上传照片' })
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认提交以上信息？',
					success: (res) => {
						res.confirm && this.uploadData()
					}
				})
			},

			// 接口:查询运单
			async getOrder() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '查询中..', mask: true, })
				let res = await that.$getOrder({ token, order_sn: this.order_sn })
				console.log('getOrder.res = ', res);
				if (res.code == 1) {
					this.detail = res.data
					let order_str = JSON.stringify(res.data)
					uni.setStorageSync('order_detail', order_str)
					// uni.navigateTo({ url: '/pages/order_detail/order_detail2' })
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:上传信息
			async uploadData() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '上传中..', mask: true, })
				let img = this.img_list.join(',')
				let query_num = this.query_num
				let res = await that.$uploadHd({ token, order_sn: this.order_sn, img, query_num })
				console.log('$uploadHd.res = ', res);
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						confirmText: '继续上传',
						cancelText: '退出',
						success: (res) => {
							if (res.confirm) {

							} else {
								uni.switchTab({ url: '/pages/index/index' })
							}
						}
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
		/* background-color: #f0f0f0; */
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		margin: 36rpx 0 0 0;
		display: flex;
		align-items: center;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
		/* font-size: 28rpx; */
		/* color: #666; */
	}

	.order_div {
		padding: 24rpx;
		background: white;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 12rpx 0 0 0;
	}

	.et_wb_num {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 25%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.et_desc {
		width: calc(100% - 48rpx);
		height: 200rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 24rpx;
	}

	/* 选择异常原因 */
	.yc_reason {
		display: flex;
		justify-content: space-between;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.item_sel_img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
	}

	.sel_img_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 选择的照片 */
	.sel_img {
		width: 132rpx;
		height: 132rpx;
		margin: 16rpx 0 0 16rpx;
		border: solid 1rpx #999;
		border-radius: 12rpx;
		/* padding: 1rpx; */
	}

	.sel_img_del {
		padding: 6rpx;
		color: orangered;
		margin: 0 0 0 16rpx;
	}

	.btn_sel_media {
		width: 300rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 60rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 75vw;
		background-color: white;
	}
</style>